<template>
	<el-card shadow="none" header="" v-loading="loading">
		<scEcharts ref="c1" height="553px" :option="option" style="padding-top:10px;"></scEcharts>
	</el-card>
</template>

<script>
import scEcharts from '@/components/scEcharts';
export default {
	title: "统计",
	icon: "el-icon-data-line",
	description: "Echarts",
	props: {
		echartsData: {
			type: Array,
			default: () => []
		}
	},
	components: {
		scEcharts
	},
	data() {
		return {
			loading: true,
			option: {}
		}
	},
	created() {
		const _this = this;
		setTimeout(function () {
			_this.loading = false
		}, 500);
		this.init();
	},
	watch: {
		echartsData() {
			this.init()
		}
	},
	mounted() {

	},
	methods: {
		init() {
			let xAxisData = []
			let seriesData = []
			if (this.echartsData) {
				xAxisData = this.echartsData.xAxisData || []
				seriesData = this.echartsData.chartSeries || []
			}
			
			const option = {
				title: {},
				tooltip: {
					trigger: "axis",
					axisPointer: {
						type: "cross"
					},
					padding: [5, 10]
				},
				toolbox: {
					show: true,
					feature: {
						magicType: { type: ['line', 'bar'] },
						// restore: {},
						saveAsImage: {}
					}
				},
				grid: {
					left: 10,
					right: 15,
					bottom: 20,
					top: 30,
					containLabel: true
				},
				xAxis: {
					type: 'category',
					data: xAxisData,
					boundaryGap: false,
					axisTick: {
						show: false
					},
					axisLabel: {
						fontSize: 25,
						color: "#999999",
						fontFamily: "#Arial"
					},
					axisLine: {
						lineStyle: {
							color: '#999999'
						}
					}
				},
				yAxis: {
					axisTick: {
						show: false
					},
					axisLabel: {
						fontSize: 25,
						color: "#999999",
						fontFamily: "#Arial"
					},
					axisLine: {
						lineStyle: {
							color: '#999999'
						}
					}
				},
				legend: {},
				series: [
					{
						name: '销售额',
						type: 'line',
						data: seriesData || [],
						itemStyle: {
							normal: {
								color: "#ff9966"
							}
						},
						animationDuration: 2000,
						animationEasing: "cubicInOut"
					}
				]
			}
			this.option = option
		}
	}
}
</script>
